<template>
	<u-popup
		:show="true"
		round="10px"
		mode="bottom"
		@close="cancelReport"
		:closeOnClickOverlay="true"
	>
		<div class="report_popup">
			<div class="title">
				<text class="h1">请填写举报原因</text>
				<text class="h2">（必选） *</text>
			</div>
			<div class="check_wrap">
				<u-checkbox-group v-model="reportReason" placement="column">
					<u-checkbox
						shape="circle"
						activeColor="#ff8822"
						:customStyle="{ margin: '7.5px 0' }"
						v-for="(item, index) in reportReasonList"
						:key="index"
						:label="item.name"
						:name="item.name"
					></u-checkbox>
				</u-checkbox-group>
			</div>
			<div class="second_title">问题描述</div>
			<textarea
				v-model="reportDes"
				placeholder="请补充说明，方便客服核实具体情况"
				placeholder-class="textarea-placeholder"
			/>
			<div class="bottom_btn_wrap">
				<div class="btn cancel" @click="cancelReport">取消</div>
				<div class="btn submit" @click="submitReport">提交</div>
			</div>
		</div>
	</u-popup>
</template>

<script>
export default {
	name: 'ReportPopup',
	data() {
		return {
			showcontactPopup: false,
			reportReason: [],
			reportReasonList: [
				{
					name: '房源已交易',
					disabled: false,
				},
				{
					name: '房源不存在',
					disabled: false,
				},
				{
					name: '房源图片虚假',
					disabled: false,
				},
				{
					name: '欺诈',
					disabled: false,
				},
				{
					name: '其他',
					disabled: false,
				},
			],
			reportDes: '',
		};
	},
	methods: {
		async submitReport() {
			if(this.reportReason.length === 0){
				return
			}
			this.$emit(
				'submitReport',
				{
					reason: this.reportReason.join(','),
					des: this.reportDes,
				},
				() => {
					this.reportDes = '';
					this.reportReason = [];
				}
			);
		},
		cancelReport() {
			this.$emit('cancelReport');
		},
	},
};
</script>

<style scoped lang="scss">
.report_popup {
	width: 100%;
	height: 457px;
	box-sizing: border-box;
	padding: 15px 16px;
	.title {
		width: 100%;
		height: 22px;
		font-size: 16px;
		font-family: PingFang SC-Semibold, PingFang SC;
		font-weight: 600;

		.h2 {
			color: #ff8822;
		}
	}
	.check_wrap {
		margin: 10.5px 0 21px 0;
	}
	.second_title {
		height: 20px;
		font-size: 14px;
		font-family: PingFang SC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
	}
	textarea {
		width: 345px;
		height: 101px;
		background: #fafafa;
		border-radius: 6px 6px 6px 6px;
		opacity: 1;
		border: 1px solid #e8e8e8;
		margin-top: 9px;
		box-sizing: border-box;
		padding: 10px;
	}
	.bottom_btn_wrap {
		display: flex;
		justify-content: space-around;
		margin-top: 21px;
		.btn {
			width: 168px;
			height: 42px;
			border-radius: 21px 21px 21px 21px;
			font-size: 16px;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			text-align: center;
			line-height: 42px;
		}
		.cancel {
			background: rgba(228, 228, 228, 0);
			border: 1px solid #aaaaaa;
			color: #999999;
		}
		.submit {
			color: #ffffff;
			background: linear-gradient(90deg, #ffa222 0%, #ff8822 100%);
		}
	}
}
</style>
